/* eslint-disable no-return-assign */
<template>
  <div class="app-container">
    <el-menu :default-active="activeNum" class="el-menu-demo" mode="horizontal" @select="filterByApproveState">
      <el-menu-item index="1">异常列表</el-menu-item>
      <el-menu-item index="2">异常刷量列表</el-menu-item>
      <el-menu-item index="3">异常解除列表</el-menu-item>
      <el-button type="primary" class="fr" size="small" @click="configuration">阀值设置</el-button>
    </el-menu>
    <el-table
      v-loading="listLoading"
      id="newsTable"
      ref="newsTable"
      :data="tableData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top:20px;">
      <el-table-column prop="id" label="序号"/>
      <el-table-column prop="id" label="编号"/>
      <el-table-column prop="id" label="资讯标题"/>
      <el-table-column prop="id" label="作者"/>
      <el-table-column prop="id" label="异常类型"/>
      <el-table-column prop="id" label="状态"/>
      <el-table-column prop="id" label="操作方式"/>
      <el-table-column fixed="right" label="操作" width="260">
        <template>
          <el-button type="primary" size="small" @click="toDetail">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="total>0" class="block fr">
      <el-pagination
        :current-page="listQuery.index"
        :page-sizes="[20, 50, 100]"
        :page-size="listQuery.size"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <el-dialog :visible.sync="dialogVisible1" width="60%">
      <el-form :inline="true">
        <p>IP访问异常监控</p>
        <el-form-item label="预警值">
          <el-input v-model="rangeData.ip.warn" class="w-100"/>
        </el-form-item>
        <el-form-item label="预警操作">
          <el-select v-model="rangeData.ip.warnOpt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="报警值">
          <el-input v-model="rangeData.ip.serious" class="w-100"/>
        </el-form-item>
        <el-form-item label="报警操作">
          <el-select v-model="rangeData.ip.seriousOpt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <br >
        <p>设备访问异常监控</p>
        <el-form-item label="预警值">
          <el-input v-model="rangeData.device.warn" class="w-100"/>
        </el-form-item>
        <el-form-item label="预警操作">
          <el-select v-model="rangeData.device.warnOpt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="报警值">
          <el-input v-model="rangeData.device.serious" class="w-100"/>
        </el-form-item>
        <el-form-item label="报警操作">
          <el-select v-model="rangeData.device.seriousOpt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <br >
        <p>异常账户访问监控</p>
        <el-form-item label="预警值">
          <el-input v-model="rangeData.abnormalMember.warn" class="w-100"/>
        </el-form-item>
        <el-form-item label="预警操作">
          <el-select v-model="rangeData.abnormalMember.warnOpt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="报警值">
          <el-input v-model="rangeData.abnormalMember.serious" class="w-100"/>
        </el-form-item>
        <el-form-item label="报警操作">
          <el-select v-model="rangeData.abnormalMember.seriousOpt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible1 = false">取消}</el-button>
        <el-button
          :loading="submitLoading"
          :disabled="submitLoading"
          type="primary"
          size="small"
          @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getlistApi,
  getRangeApi
} from '@/api/forewarningManagement.js';
export default {
  name: 'Warning',
  data() {
    return {
      options: [{
        value: '不处理',
        label: '不处理'
      }, {
        value: '标记IP访问异常',
        label: '标记IP访问异常'
      }, {
        value: '标记设备访问异常',
        label: '标记设备访问异常'
      }, {
        value: '标记访问增速异常',
        label: '标记访问增速异常'
      }, {
        value: '标记异常账户访问',
        label: '标记异常账户访问'
      }, {
        value: '拉黑下架',
        label: '拉黑下架'
      }],
      activeNum: '1',
      dialogVisible1: false,
      tableData: [{
        id: 666
      }],
      listLoading: false,
      submitLoading: false,
      total: 1,
      listQuery: {
        index: 1,
        size: 10,
        type: 1 // 1=疑似异常；2=异常刷量；3=异常解除
      },
      rangeData: {
        ip: {
          warn: 100,
          warnOpt: 1,
          serious: 1000,
          seriousOpt: 2
        },
        device: {
          warn: 100,
          warnOpt: 1,
          serious: 1000,
          seriousOpt: 3
        },
        abnormalMember: {
          warn: 100,
          warnOpt: 1,
          serious: 1000,
          seriousOpt: 4
        }
      }
    };
  },
  watch: {
    $route(to, from) {
      if (from.path === '/warningDetail' && to.path === '/mediaWarning') {
        this.listQuery.type = 2;
      } else if (from.path !== '/warningDetail' && to.path === '/mediaWarning') {
        this.listQuery = {
          index: 1,
          size: 10,
          type: 1
        };
        this.activeNum = '1';
      }
    }
  },
  activated() {
    this.init();
  },
  methods: {
    init() {

    },
    getList() {
      getlistApi(this.listQuery).then(res => {
        // eslint-disable-next-line no-empty
        if (res.code == 200) {}
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList4();
    },

    handleCurrentChange(val) {
      this.listQuery.index = val;
      this.getList4();
    },
    filterByApproveState(index) {
      this.activeNum = index;
      this.listQuery.type = index;
      this.getList();
    },
    toDetail() {
      this.$router.push({ path: '/warningManagement/warningDetail', query: { id: 1 }});
    },
    configuration() {
      getRangeApi().then(res => {
        if (res.code == 200) {
          // this.rangeData = res

          this.rangeData = {
            ip: {
              warn: 100,
              warnOpt: 1,
              serious: 1000,
              seriousOpt: 2
            },
            device: {
              warn: 100,
              warnOpt: 1,
              serious: 1000,
              seriousOpt: 3
            },
            abnormalMember: {
              warn: 100,
              warnOpt: 1,
              serious: 1000,
              seriousOpt: 4
            }
          };

          this.dialogVisible1 = true;
          this.submitLoading = false;
        }
      });
    },
    submit() {
      if (!this.validateForm()) return;
      this.submitLoading = true;

      this.dialogVisible1 = false;
    },
    validateForm() {
      if (!this.rangeData.ip.warn || this.rangeData.ip.warn < 1) {
        this.$message.error('IP访问异常预警值不能为空', true);
        return false;
      }
      if (!this.rangeData.ip.serious || this.rangeData.ip.serious < 1) {
        this.$message.error('IP访问异常报警值不能为空', true);
        return false;
      }
      if (!this.rangeData.device.warn || this.rangeData.device.warn < 1) {
        this.$message.error('设备访问异常预警值不能为空', true);
        return false;
      }
      if (!this.rangeData.device.serious || this.rangeData.device.serious < 1) {
        this.$message.error('设备访问异常报警值不能为空', true);
        return false;
      }
      if (!this.rangeData.abnormalMember.warn || this.rangeData.abnormalMember.warn < 1) {
        this.$message.error('异常账户访问预警值不能为空', true);
        return false;
      }
      if (!this.rangeData.abnormalMember.serious || this.rangeData.abnormalMember.serious < 1) {
        this.$message.error('异常账户访问报警值不能为空', true);
        return false;
      }
      return true;
    }
  }
};
</script>>

<style lang="scss" scoped>
.w-100 {
    width: 100px;
}
.w-150 {
    width: 150px;
}
span {
    display: inline-block;
    margin-right: 14px;
}
.block {
    padding-top: 10px;
}
.fr{
	float: right;
}
</style>
